<template>
	<view style="background-color: #151515;">
		<!--  -->
		<view>
			<view class="header">
				<view class="title" v-if="action == 'confirm'">
					ai调香结果确认页
				</view>
				<view class="title" v-if="action == 'official'">
					大师臻选调香
				</view>
				<view class="title" v-if="action == 'my'">
					管理配方
				</view>
				<!--  -->
				<view class="checkbox" v-if="action != 'official' && action != 'my'">
					 <u-checkbox-group inactiveColor="#000000" activeColor="#000000" >
					     <u-checkbox :checked="showMyself"  @change="setShowMyself" labelSize="10" labelColor="#ffffff" size="14" label="只看自己的配方"> </u-checkbox>
					 </u-checkbox-group>
				</view>
			</view>
			
			<!-- 逻辑整理下 -->
			<view v-if="action == 'confirm'" class="resetBtn"  >
				<u-icon name="reload"  size="28"></u-icon>   
				<label>重新调配   </label>
				<label style="padding-left: 40rpx;">再生成一个 </label>
				
			</view>
			<view class="search" v-else>
				<input
					    placeholder="搜索香号/配方名"
					    @input="searchKeyword"
						v-model="keyword"
						border="surround"
						class="input"
						style="background-color: rgb(48, 48, 48); "
						@focus="showSearch"
						placeholder-class="input-placeholder"
					/> 
				<view class="icon">
					<u-icon name="search" size="30"></u-icon>
				</view>
				<view class="result" v-if="isSearch">
					<scroll-view scroll-y="true" @scrolltolower="loadSearchMore" class="container"> 
						<view class="item" v-for="(item,index) in searchData" @click="setSearchResult(item)">
							<view class="code">{{item.code}}</view>
							<view class="name">{{item.name}}</view>
						</view>
						<u-empty text="未搜索到结果" v-if="searchData.length == 0" textColor="#FFF"></u-empty>
					</scroll-view>
					
				</view>
			</view>
			
		</view>  
		
			
		<view class="reload"  v-if="(nameLoaded && staffLoaded && descLoaded && action=='confirm' && (hash.type == 1 || hash.type == 2)) " @click="doReset"><u-icon name="reload" size="24" ></u-icon>重新调配</view>
		<view class="reload"  v-if=" (nameLoaded && staffLoaded  && descLoaded && hash.type == 3 || this.master_id) " @click="doRepick"><u-icon name="reload" size="24" ></u-icon>重新帮我选</view>
	 	<view class="top-swiper" @click.stop="isSearch=false">  
			 <view class="box" > 
				<!-- <label style="color: #fff;">ddd{{ data?.length }}</label> -->
				 <!-- @change="onSwiperChange" -->
				<swiper :current="current"   
					:indicator-dots="false"  
					ref="mySwiper"  
					indicator   
					:acceleration='true'   
					indicatorMode="line"  
					@change="setCurSwiper" 
					:duration="swiperSpeed" 
					class="swiper" 
					:previous-margin="swiper.margin" 
					:next-margin='swiper.margin' 
					:circular="true" 
					@touchstart="touchStart"
					@touchend="touchEnd" 
					@animationfinish="swiperChange"> 
			 		<swiper-item catchtouchmove v-for="(item,index) in data" :key="index" :class="'itemSwpier ' +(swiper.index == index?'itemSwpierCur':'')" >			 			
							<view class='le-img'  :class="'le-active'+(swiper.index == index)" 
							:style="{ 'background':'url('+imgHost+'/statics/assets/dialogBg.png) no-repeat top center','background-size':'100% 100%'}"> 
							
						     	<!-- 删除弹窗确认框 -->
								<view class="rgClose" @click.stop="delBlock" v-if="action != 'official'">
									<image :src="imgHost + '/statics/assets/iconClose.png'" style="width: 47rpx; height: 47rpx;" ></image> 
								</view>
								
								<view class="new" v-if="index ==0 && action=='confirm' && id == item.id">NEW !</view>
								
								<!-- 需要整理逻辑 -->
								<view class="saveHasMaske" v-if="action=='my'">已定制 永久保存</view>
								<view class="saveHasMaske saveNoMaske"  v-if="action=='my'" >未定制 3天后自动删除</view> 
								
								<!--
								<view class="current">
									<u-checkbox-group inactiveColor="#000000" shape="circle" activeColor="#000000" >
									    <u-checkbox :checked="hashSelected == index ? true : false"  labelSize="15"  size="18" label="当前选中"> </u-checkbox>
									</u-checkbox-group>
								</view>
								-->
								<!-- <view class="name" v-if="(id == item.id && action == 'confirm')">
									<u-input color="#000000" :customStyle="{'padding':0}" fontSize="23" @change="setItemName" :value="form.name" inputAlign="center" :placeholder="placeholder.name" />
									<u--icon name="reload" @click="reloadGPT(id,'name')" v-if="nameLoaded" size="16"></u--icon> 
								 </view>
								<view class="name1" v-if="action == 'my'" >
									<u-input color="#000000" :customStyle="{'padding':0}" fontSize="23" @change="setItemName" :value="item.name" inputAlign="center" placeholder="请填写香氛名" />
									<u--icon name="edit-pen" @click="editName(item.id)"  size="18"></u--icon> 
									</view>
								<view class="name2" v-if="(id != item.id) && action == 'official'" >
									{{item.name}}
								</view> -->
								
								
								<view class="name" v-if="(id == item.id && action == 'confirm')">
									<u-input color="#000000" :customStyle="{'padding':0}" fontSize="23" @change="setItemName" :value="form.name" inputAlign="center" :placeholder="placeholder.name" />
									<u-icon name="reload" @click="reloadGPT(id,'name')" v-if="nameLoaded" size="16"></u-icon> 
								 </view>
								<view class="name1" v-if="action == 'my'" @click.stop="editName(item)" style="text-align: center; display: flex; justify-content:center;">
									<!-- <u-input color="#000000" :customStyle="{'padding':0}" fontSize="23" @change="setItemName" :value="item.name" inputAlign="center" placeholder="请填写香氛名" />
									<u--icon name="edit-pen" @click="editName(item.id)"  size="18"></u--icon> -->
									{{ item.name }}   
								</view>
								<view class="name2" v-if="(id != item.id) && (action == 'official' || action == 'confirm')" >
									{{item.name}}
								</view>
								
								<view class="codeBox">
									<view class="code" @click="copyText(item.code)">唯一香号：{{item.code}} </view> 
									<!-- 逻辑整 -->
									<u-icon name="reload" class="reload" @click="reloadGPT(id,'code')" size="16" style="padding-left:5rpx" v-if="action == 'my'"></u-icon> 
								</view> 
								
								<view style="height: 40rpx;">
									<view class="dotTop"></view> 
								</view>
								<scroll-view scroll-y="true"  class="scroll-intro" :scroll-top="introScrollTop" v-if="id == item.id"><view  id="scroll_intro" class="intro" v-html="item.intro" @click.stop="editContent(item)"></view></scroll-view> 
								<scroll-view scroll-y="true" class="intro" v-if="id != item.id" v-html="item.intro" @click.stop="editContent(item)">
									
								</scroll-view>
								<!-- <view class="reload-intro" v-if="action == 'confirm' && id == item.id"><u--icon name="reload" @click="reloadGPT(id,'desc')" v-if="descLoaded" size="20"></u--icon></view> -->
								<view>
									<view class="nickname">
										<view class="left">
											 <u-icon v-if="action == 'confirm' && id == item.id" @click="reloadGPT(id,'desc')" name="reload" style="margin-top:30rpx"></u-icon>
										</view>
										<view class="right">
											<text style="font-size: 22rpx;">
												调香师：
											</text>
											 <!-- v-if="(id != item.id)" -->
											<text class='username' v-if="(id != item.id)">
												{{form.truename}}
											</text>
											<input placeholder="请填写调香师" v-if="(id == item.id && action == 'confirm') " :value="form.truename" :style="{width:'200rpx','font-size':'22rpx'}" />
											<!-- <u-icon v-if="nameLoaded" name="reload" ></u-icon> -->
										</view>
									</view>
								</view>
								
								<view class="bottom" :style="{'margin-top':'50rpx'}">
									<view class="left">
										<view class="line"></view>
									</view>
									<view class="right" style="font-weight: bold;">Al调香实验室</view>
								</view>
							</view>
			 		</swiper-item>
			 	</swiper> 
				<!-- <view class="slider"  v-if="(nameLoaded && descLoaded && staffLoaded && data.length > 0) || (action == 'official' && !isSearchResult  && data.length > 0) || (action == 'my' && data.length > 0)  ">
					<slider :value="current" @change="resetSlider" @changing="setSlider" :min="0" :max="data.length"  /> 
				</view>  --> 
				
				
				<!-- <scroll-view class="" scroll-x="true" > -->
				<!-- :current="indicatorCurrentIndex" -->
				<!-- 自定义指示器 swiper -->
				<!-- <view style="color: #fff;">{{ current }}</view> -->
				<swiper 
				  v-if="master_id == 0&&!isSearchResult" 
				  class="indicator-swiper scroll-view"
				  :indicator-dots="false"				 
				  :current="current"
				  :acceleration='true'
				  @change="handleIndicatorChange"
				  circular
				  :autoplay="false" 
				  :duration="300" 
				  :scroll-with-animation="true"
				  :effect3d='true' 
				  @touchstart="touchStart"
				  @touchend="touchEnd" 
				  :effect="'cube'"
				  
				>
				<!-- v-for="(item,index) in data" -->
				  <swiper-item v-for="(group, index) in total"  :key="index" class="dotSwiper"  style="width: 4.75%; height: 50rpx;">
					 <view class="indicator-dot" :class="current==index || index==0?'active':''" v-if="current==index|| index==0"  @click="current=index" ></view>
					  <view class="indicator-dot active2" v-else-if="current==(index-1)|| index==1"  @click="current==(index-1)" ></view> 				  
					  <view class="indicator-dot active3" v-else-if="current==(index-2)|| index==2"  @click="current=index" ></view>
					  <view class="indicator-dot active4" v-else-if="current==(index-3)|| index==3"  @click="current=index" ></view>
					  <view class="indicator-dot active5" v-else-if="current==(index-4)|| index==4" @click="current=index" ></view>
					  <view class="indicator-dot active6"  v-else-if="current==(index-5)|| index==5" @click="current=index" ></view>
					  <view class="indicator-dot active7"  v-else-if="current==(index-6)|| index==6"  @click="current=index" ></view>   
					 <view class="indicator-dot active8"  v-else-if="current==(index-7)|| index==7" @click="current=index" ></view>
					  <view class="indicator-dot active9"  v-else-if="current==(index-8)|| index==8" @click="current=index" ></view>
					  <view class="indicator-dot active10"  v-else-if="current==(index-9)|| index==9"  @click="current=index" ></view>
					  <view class="indicator-dot active11"  v-else-if="current==(index-10)|| index==10" @click="current=index" ></view>
					  <view class="indicator-dot active10"  v-else-if="current==(index-11)|| index==11" @click="current=index" ></view>
					  <view class="indicator-dot active9"  v-else-if="current==(index-12)|| index==12" @click="current=index" ></view>
					  <view class="indicator-dot active8"  v-else-if="current==(index-13)|| index==13" @click="current=index" ></view>
					  <view class="indicator-dot active7"   v-else-if="current==(index-14)|| index==14" @click="current=index" ></view>
					  <view class="indicator-dot active6"   v-else-if="current==(index-15)|| index==15" @click="current=index" ></view>
					  <view class="indicator-dot active5"   v-else-if="current==(index-16)|| index==16" @click="current=index" ></view>
					  <view class="indicator-dot active4"   v-else-if="current==(index-17)|| index==17" @click="current=index" ></view>
					  <view class="indicator-dot active3"   v-else-if="current==(index-18)|| index==18" @click="current=index" ></view>
					  <view class="indicator-dot active2"   v-else-if="current==(index-19)|| index==19" @click="current=index" ></view>
					  <view class="indicator-dot active1"   v-else-if="current==(index-20)|| index==20"  @click="current=index" ></view>
					  <view class="indicator-dot active"   v-else-if="current==(index-21)|| index==21"  @click="current=index" ></view>
				  </swiper-item>
				</swiper>  
				 
			 </view>  
			  
			
				<view class="pg_bottom"  v-if="(nameLoaded && descLoaded && staffLoaded) || action == 'official' || action == 'my'">
					<view v-if="isSearchResult" class="search_back" @click.stop="showSearchResult">
						<view class="btns" style="margin-top: 20px;">
							返回原始配方
						</view>
					</view>
					<view class="checkbox" v-if="(hash.status == 0 && action == 'confirm')    || action == 'my'">
						 <view class="l">
						 	<up-checkbox-group
						 	    iconPlacement="left" 
						 	    placement="row">
						 		<up-checkbox
						 				size="14"
						 				label=""
						 				name="isOfficial"
						 				:checked = "isOfficial "
						 				inactiveColor="#888"
						 				activeColor="#000"
						 				shape="circle" 
						 				@change="setOfficial"
						 				
						 			>
						 		</up-checkbox>
						 	</up-checkbox-group>
						 </view>
						 <view class="r" @click="setOfficial(!isOfficial)">
						 	同意共享该配方至官方公开配方库
							<!-- 我的 -->
						 </view>
					</view>
					<view class="checkbox" style="margin-top: 10rpx;" v-if="(hash.status == 0 && action == 'confirm') || action == 'official' || action == 'my'">
						 <view class="l">
						 	<up-checkbox-group
						 	    iconPlacement="left" 
						 	    placement="row">
						 		<up-checkbox
										size="14"
						 				label=""
						 				name="agree"
						 				:checked = "isLock "
						 				inactiveColor="#888"
						 				activeColor="#000"
						 				@change="setLock"
										shape="circle" 
						 			>
						 		</up-checkbox>
						 	</up-checkbox-group>
						 </view>
						 <view class="r" @click="setLock(!isLock)">
						 	直接 <text style="color:#b1b36a; opacity: 1;">锁定订单</text>（<text>优先安排</text>，无法更改）
						 </view>
					</view>
					
					<!-- 需要处理 -->
					<!-- <view class="btn " @click="saveWay"  v-if="action == 'official'" >
						<text class="sure">保存配方</text>
						<text class="tips">当前可保存配方数:1</text> 
					</view> -->
					<!-- 需要处理 -->
					<view class="flex " style="display: flex; margin: 30rpx 30rpx 50rpx 30rpx;" v-if="action == 'confirm'">
						<view class="btn btn1" style="width: 50%;" >
							<text class="sure" @click="clickBackindex">返回主页</text> 
						</view>
						<view class="btn btn1" style="width: 50%;">
							<text class="sure" @click="clickSaveResult">保存结果：{{form.name}}</text> 
						</view>
					</view>
					
					
					<!-- 分享 --> 
					<view class="btn  flex" v-if="action == 'my'" @click="success=true">
						<text class="sure" style="padding: 20rpx 0;">生成调香海报分享给朋友</text>
					</view>
					
					<view class="btn btBottom " @click="submit"  v-if="(hash.status == 0 && action == 'confirm') || action == 'official' || action == 'my'">
						<text class="sure">确认定制：{{form.name}}</text>
						<text class="tips">(未锁定,可在15分钟内在“已制作”中重新调配)</text>
					</view>
					<view class="btn btBottom flex" @click="goto('myindex/myindex')"  v-if="hash.status == 1">
						<text class="sure">返回首页</text>
					</view>
				</view>
			 <view style="height: 10rpx;"></view>
		</view>
		
		<!-- 隐藏下 -->
<!-- 		<u-overlay :show="(!staffLoaded || !descLoaded || !nameLoaded ) && action =='confirm' " >
			<view class="overlay-warp">
				<view class="status" v-html="statusText"></view>
				<view class="tip">若等待时间过长<br />可以尝试刷新页面重新加载</view>
				<view class="progress-warp"> 
					<u-loading-icon mode="circle" :vertical="true" textColor="#FFF" text="" :show="(!staffLoaded || !descLoaded || !nameLoaded ) && action =='confirm' " ></u-loading-icon>
			    </view>
			</view> 
		</u-overlay> -->
		
		<!-- <u-popup :show="success" mode="center"   bgColor="transparent">
			<view class="success">
				<view class="title">订单提交成功，您的专属加密香号是</view>
				<view class="haxi2">
					
					<view class="code">{{form.code}}</view>
					<text>
						您可以在主页中的“我的配方"中查看该配方<br /></text>
					
					你也可以分享给其它人，但当他需要使用您的配方时，<br>
					必须要先经过您在“我的配方”中授权
				</view>
				<view class="haxi1" style="text-align: center;">
					现在，您可以关闭此页，或者
				</view>
				<view class="haxi3" @click="goto('myindex/myindex')">
					返回主页
				</view>
			</view>
		</u-popup> -->
		
		
		<u-popup :show="success" mode="center"   bgColor="transparent">
			<view class="dialogBox "> 
				<view class="dialogBoxCon"> 
					<view class="close">
						<image  :src="imgHost + '/statics/assets/iconClose.png'" @click.stop="success=false" class="btnClose"></image>
					</view>
					<view>
						<image :src="imgHost + '/statics/assets/iconClose.png'" class="logoh"></image>
					</view>   
				
					<view class="til_code">{{form.code}}</view>
					<view class="info1">
						订单编号：P749614973481130881<br/>
						AI调香师：奔跑的斑马<br/>
						香氛名称：奔跑的斑马<br/>
						定制日期：2024/12/15
					</view> 
					
					<view class="info2">
						<h2>您的订单已经提交成功！</h2> 
						<view style="padding: 10rpx 0 50rpx 0;">订单自动绑定配方香号，通常会在次日发货，最晚不超过48小时</view>
						<view>若您未锁定订单，可15分钟内在主页中“已制作”中选择“重新调制” 若“已制作”中显示“已确认”，则代表该订单已打印无法更改</view> 
					</view> 
					
					<view class="haxi3" @click="goto('myindex/myindex')">
						完成并返回主页
					</view>  
				</view>
				
			</view>
		</u-popup>
		
		<u-modal :show="editNameShow" v-if="editNameShow" width='320px'  :showConfirmButton='true' :showCancelButton='true' @confirm='confirmEditName' @cancel='editNameShow=false'>
			<view style="margin-top: 10rpx;">  
					<u-input
					    placeholder="请填写香氛名"
					    border="surround"
						:customStyle="{'padding':'6px 10px', 'width':'300px', 'border':'1px solid #ddd'}"
					    :value="editNameTxt" 
						@change="changeName"
					  ></u-input> 
			</view>
		</u-modal>  
		<!-- editName -->
		<!-- 修改名字 -->	
			
		<!-- 修改内容 -->
		<u-modal :show="editNameShow1" v-if="editNameShow1" width='320px'  :showConfirmButton='true' :showCancelButton='true' @confirm='confirmEditContent' @cancel='editNameShow1=false'>
			<view style="margin-top: 10rpx;">  
				<textarea
					placeholder="请填写内容" 
					style="border: 1px solid #eee; width: 300px; padding: 6px; margin: 0 20rpx;"
					:value="editNameContent" 
					@change="editContent"
				  ></textarea>  
			</view>
		</u-modal> 
		 <!-- 修改内容  end-->
		
		<u-popup :show="successWay" mode="center"   bgColor="transparent">
			<view class="dialogBox"  @click="savePic">
				<view class="headerTop">
					<view class="saveHasMaske" >长按保存配方海报分享给朋友吧</view>
					<view class="close"  @click.stop="successWay=false">
						<image  :src="imgHost + '/statics/assets/iconClose.png'" class="btnClose"></image>
					</view>
				</view>
				
				<view class="dialogBoxCon" id="shareBox">
					<view>
						<image  :src="imgHost + '/statics/assets/logoh.png'" class="logoh"></image>
					</view>
					<view class="til_code">{{form.code}}</view>
					<view class="info1">
						订单编号：P749614973481130881<br/>
						AI调香师：奔跑的斑马<br/>
						香氛名称：奔跑的斑马<br/>
						定制日期：2024/12/15
						<view class='codeImg'>
							<image   :src="imgHost + '/statics/assets/code.png'" ></image>
						</view>
					</view> 
					
					<view class="info2"> 
						<view>香氛介绍：初闻，橙花的香气如同划破夜幕的第一道曙光，清澈而充满希望。随之而来的是小豆蔻的辛香，宛如沉睡的大地苏醒时，从泥土中散发出的活力气息。当摇摆的绿意与云杉的木质香调交织在一起，仿佛晨雾中隐约可见的森林，带着一丝神秘与静谧。而黑加仑子的酸甜，则像是林间成熟的浆果，在露水的滋润下，散发出诱人的气息。最后，阿拉伯茉莉的馥郁花香，如同初升的太阳，将温暖的光芒洒向大地，也为这支香气增添了一抹温柔与优雅。它是一首关于希望与重生的赞歌，也是一段在香气中寻找自我的旅程。</view> 
					</view> 
					
					<view class="haxi3" >
						长按扫码定制我调的专属香氛
					</view>  
				</view>
			</view>
			
			
		</u-popup>
		
		<!-- 提示的弹窗 -->
		
		<!-- <u-modal :show="editName" v-if="editNameShow1" width='320px'  :showConfirmButton='true' :showCancelButton='true' @confirm='confirmEditName' @cancel='editNameShow1=false'>
			<view style="margin-top: 10rpx;"> 
			  当前总配方已超过上限3个，需要到配方管理中删除未定制配方方可继续。
			  立即前往删除   一键清空未定制配方
			</view>
		</u-modal> -->
		
		
		<!-- 返回主页提示 逻辑需要处理 -->
		
		<u-modal :show="backIndexShow" v-if="backIndexShow" width='320px'  :showConfirmButton='true' :showCancelButton='true' @confirm='backIndexShow=false' @cancel='backIndexShow=false'>
			<view style="margin-top: 10rpx;"> 
				直接返回主页配方将不会保存。
			</view>
		</u-modal> 
		
		<!-- 保存结果  --> 
		<u-popup :show="saveResultShow" mode="center" class="savePop" @close="saveResultShow=false" >
			<view class="content" :style="{'bacground':'url('+imgHost+'/statics/assets/dialogBg.png) top center no-repeat'}"> 
				<view class="content1">未定制配方最多保存3个，3天后将被自动清空，确定定制的配方将永久保存。</view> 
				<view class="flex bottomPop" >
					<view class="btn" @click="saveResultShow=false">取消</view>
					<view class="btn">继续保存</view>
					<view class="btn btn3">定制该配方</view>
				</view>
			</view>
		</u-popup>
		 
		
		
		
	</view>
</template>

<script>  
import store from "@/store";
import { ref } from 'vue';  
import cfg from '@/config/app';
import Cache from '@/utils/cache';
import { actionLog } from "@/api/api";
import { onLoad } from '@dcloudio/uni-app';
import cardSwiper from "@/components/helang-cardSwiper/helang-cardSwiper"
import { confirm,my,search,copyStaff } from '@/api/staff';
import { getStaff,getStaffName,getTiaopei,reset,repick,modifyName } from '@/api/hash';
import html2canvas from 'html2canvas';
import FakeProgress from 'fake-progress'
import {HTTP_REQUEST_URL} from '@/config/app';
// import { EffectCoverflow } from '@zebra-ui/swiper/modules' 
// const modules = ref([EffectCoverflow])
	export default {
		data() {
			return {
				list3: [
				  "https://xxx.com/swiper/swiper3.png",
				  "https://xxx.com/swiper/swiper2.png",
				  "https://xxx.com/swiper/swiper1.png",
				],
				master_id : 0,
				imgHost : '',
				fake: new FakeProgress({
					timeConstant: 5000,  //timeConstant相当于分母，分母越大则加的越少
					autoStart: true //自动开始
				}),
				startSwiper:false,
				swiperSpeed:100,
				processBarInterval : null,
				isRightAllData:false,
				isLeftAllData:false,
				isSliderBtn:false,
				swiperPosition : '',
				swiperRunning : false,
				isSearch : false,
				keyword : '',
				canEdit:false,
				searchData:[],
				isSearchResult:0,
				searchPage : 1,
				action : 'confirm',
				showMyself:true,
				nameLoaded:false,
				descLoaded:false,
				staffLoaded:false,
				isGettingName : false,
				isGettingIntro : false,
				introScrollTop:0,
				scrollHeight:0,
				scrollToView:'test',
				id : 0,
				type : 1,
				myHash : [],
				isDeep : false,
				isSwiper : false,
				isRunning:false,
				isReload:0,
				current:0,
				slider:50,
				limit : 21,
				isLock:false,
				isOfficial : true,
				currentSlider:0,
				page : 1,
				interval : null,
				data : [],
				hash: {
					'name' : '',
					'intro' : '',
					'staff' : '',
				},
				swiper: {
					margin: "100rpx",
					index: 0,
					
				},
				form : {
					name : '2',
					intro : '',
					id : '',
					code : ''
				},
				error : 0,
				isSubmit : 0,
				isConfirm:0,
				success:false,
				statusText:'',
				countTime : 60,
				staffInterval: null,
				percent : 0,
				staff_gpt_has_error : false,
				staff_name_gpt_retry_time : 0,
				current_intro_gpt_server : 0,
				staff_intro_gpt_retry_time : 0,
				current_gpt_server : 0,
				total_gpt_server : 0,
				staff_total_error : 0,
				checkStatusInterval : null,
				placeholder:{
					name : ''
				},
				last_page:1,//总页码
				total:0,
				touchStartX: 0,
				touchStartY: 0,
				touchStartTime: 0,
				leftForceX:0,
				rightForceX:0,
				editNameShow:false,
				editNameShow1:false,
				
				editNameContent:'',
				
				
				curItem:"",
				editNameTxt:'',
				successWay:false,
				saveResultShow:false,
				backIndexShow:false
			}
		},
		components:{
			cardSwiper
		},
		watch:{
			slider(newValue,oldValue){
				if ( newValue != oldValue ){					
					this.runSwiper(newValue);
				}
				
			},
			page(newValue,oldValue){ 
				if(newValue<=this.last_page){
					this.getMyHash();
				}
			}
			
		},
		
		computed: {  
		  
		}, 
		
		onLoad(option){
			this.id = option.id;
			this.action = option.action || 'confirm';
			this.imgHost = HTTP_REQUEST_URL;
			if ( this.action == 'official' ){
				this.showMyself = false;
			}
			this.master_id = option.master_id || 0;
			
			this.init();
		},
		
		methods:{ 	 
			
		    
			
			clickBackindex(){
				this.backIndexShow = true
			},
			clickSaveResult(){
				this.saveResultShow = true
			}, 
			
			touchStart(e) {
			 if(this.data?.length==1) return false 
			  this.touchStartX = e.touches[0].clientX;
			  this.touchStartY = e.touches[0].clientY;
			  this.touchStartTime = e.timeStamp;
			},
			touchEnd(e) {
				if(this.data?.length==1) return false 
			  let endX = e.changedTouches[0].clientX;
			  let endY = e.changedTouches[0].clientY;
			  let endTime = e.timeStamp;
					
			  let deltaX = endX - this.touchStartX;
			  let deltaY = endY - this.touchStartY;
			  let duration = (endTime - this.touchStartTime) / 1000; // 转换为秒
					
			  // 计算滑动力度（这里简单使用距离除以时间）
			  let forceX = Math.abs(deltaX) / duration;
			  let forceY = Math.abs(deltaY) / duration; 
			  // 判断滑动方向
			  if (Math.abs(deltaX) > Math.abs(deltaY)) {
				if (deltaX > 0) {
				  console.log("右滑，力度：", forceX);
				  this.rightForceX = forceX;
				  if(this.rightForceX>1500){
					  this.current = this.current-2
				  }
				  
				} else {
				  console.log("左滑，力度：", forceX);
				  this.leftForceX = forceX
				  if(this.leftForceX>1500){
				  	 this.current = this.current+2
				  }
				}
			  }  
			},
			
			handleSwiperChange(event) {
			  this.current = event.detail.current; 
			  this.updateIndicatorIndex();
			},
			handleIndicatorChange(event) {
			  this.indicatorCurrentIndex = event.detail.current;
			  this.current = event.detail.current;
			  
			  // this.current = this.indicatorCurrentIndex * (this.visibleDotRange * 2 + 1);
			},
			updateIndicatorIndex() {
			  this.indicatorCurrentIndex = Math.floor(this.current / (this.visibleDotRange * 2 + 1));
			},  
			showSearchResult(){
				this.page=1
				this.getData();
				this.isSearchResult=false;
			},
			initScrollHeight() {
				uni.createSelectorQuery()
				.in(this)
				.select('#scroll_intro')
				.boundingClientRect(data => {
					if (data) {
						this.introScrollTop = data.height 
					}
				})
				.exec();
			},
			setLock(e){
				this.isLock = e;
			},
			setOfficial(e){
				this.isOfficial = e
			},
			stopSwiper(){
				this.isSwiper = false;
				clearInterval(this.interval);
			},
			createProcessBar(durning){
				
				this.fake.progress = 0 //每次先归零
				this.fake.start()
				console.log('a',this.fake.progress )
				
			},
			getData(){
				if ( this.action == 'confirm' ){
					this.getMyHash();
					
					getTiaopei(this.id).then(res =>{
						this.total_gpt_server = res.data.server_count;
						this.hash = res.data;
						
						let that = this;
				
						/*
						this.staffInterval = setInterval(function(){
							
							that.countTime --;
							
							if( !that.staffLoaded ){
								if ( that.isDeep == 0 ){
									that.statusText = "AI正在获取配方，请稍候<br />剩余"+that.countTime+"秒...";
								}else{
									that.statusText = "AI正在深度调配<br />请耐心等待，剩余"+that.countTime+"秒...";
								}
							}else{
								that.statusText = "AI正在为您优化配方...<br />请耐心等待，剩余"+that.countTime+"秒...";
							}
							
							if ( that.countTime == 0 ){
								that.countTime = 20;
								that.isDeep = 1;
							}
					
							if ( that.descLoaded && that.nameLoaded && that.staffLoaded ){
								clearInterval(that.staffInterval);
								
							}
						},1000);
						*/
						this.getGptStaff();
					}).catch( e=>{
						uni.$u.toast(e);
					})
				}
				if( this.action == 'official' || this.action == 'my' ){
					if ( this.master_id > 0 ){
						this.doRepick();
					}else{
						this.getMyHash();
					}
					
				}
				
			},
			getMyHash(){
				if(this.page==1){
					this.data = [];
					uni.showLoading({
						title:'加载中'
					});
				}
				
				my({"page":this.page,'limit':this.limit,'myself':this.showMyself ? 1 : 0,'master_id':this.master_id,'only':this.action == 'official' ? 1 : 0}).then(res =>{
					
					if (this.startSwiper){
						if ( res.data.data.length == 0 ){
							this.swiperPosition = '';
							this.isRightAllData = true;
							uni.$u.toast("所有配方加载完毕");
							return false;
						}
					} 
					this.last_page = res.data.last_page;
					this.total = res.data.total;
					if(this.total<21){
						this.data = [...res.data.data,...res.data.data,...res.data.data,...res.data.data,...res.data.data,...res.data.data,...res.data.data,...res.data.data,...res.data.data,...res.data.data,...res.data.data,...res.data.data,...res.data.data,...res.data.data,...res.data.data,...res.data.data,...res.data.data,...res.data.data,...res.data.data,...res.data.data,...res.data.data,...res.data.data]; 
						this.total = this.data?.length;
					}else{
						this.data = [...this.data,...res.data.data]; 
					}
					
					// this.data =res.data
					if(this.page==1 && this.data.length> 0){
						this.form.name = res.data.data[0].name;
						this.form.intro = res.data.data[0].intro;
						this.form.truename = res.data.data[0].truename;
						this.form.code = res.data.data[0].code;
						this.form.id = res.data.data[0].id;
						
					}
					if(this.page<res.data.last_page){
						this.page++
					} 
					
					if ( this.action != 'confirm' ){
						this.nameLoaded = true;
						this.descLoaded = true;
						this.staffLoaded = true;
					}
					
					
					this.initScrollHeight();
					 if ( this.data.length == 0 ){
						 clearInterval(this.interval);
					 }
					 uni.hideLoading()
				}).catch(e =>{
					console.log(e);
					  uni.showToast({
						title:e
					  })
				})
			},
			setSearchResult(item){  
				this.isSearch = false;
				this.isSearchResult = 1;
				this.data = [{...item}];
				// this.data.push();
				this.form.name = item.name;
				this.form.id = item.id;
				this.current = 0
			},
			showSearch(e){
				this.searchKeyword(e);
				this.isSearch = true;
			},
			searchKeyword(e){
				this.searchPage = 1;
				this.searchData = [];
				this.keyword = e.detail.value;
				this.isSearch = false;
				
				this.isSearch = true;
				this.getSearchResult();
				
			},
			getSearchResult(){
				search({page:this.searchPage,"keyword":this.keyword,'myself':this.showMyself ? 1 : 0,'only':this.action == 'official' ? 1 : 0}).then(res =>{
					for(var i in res.data){
						this.searchData.push(res.data[i]);
					}
					
				}).catch(e =>{
					
				})
			},
			loadSearchMore(){
				this.searchPage ++;
				this.getSearchResult(this.keyword);
			},
			setSlider(e){
				
				let value = e.detail.value;
				this.slider = value;
				this.isSliderBtn = true;
				this.swiperPosition = value < 50 ? 'left' : 'right';
				let v = 0;
				if ( this.swiperPosition  == 'left' ){
					v =  (100 - (50 +  value));
					
				}else{
					v =  value - 50;
					
				}
				this.swiperSpeed = 1000 - (v*15);
				console.log('aa',this.swiperSpeed);
				/*
				this.runSwiper(value);*/
				
				
				
			},
			setItemName(e){
				this.editNameStr = e;
			},
			editName(item){  
				this.editNameShow=true;
				this.curItem = item;
				this.editNameTxt = item.name; 
			},
			changeName(e){
				this.editNameTxt = e; 
			},
			confirmEditName(){ 
				if ( this.editNameTxt == '' ) return false;
				modifyName({'id':this.curItem?.id,'name':this.editNameTxt}).then(res =>{
					uni.$u.toast(res.msg);
					this.editNameShow=false
				}).catch(e =>{
					uni.$u.toast(e.msg);
				})
			},
			
			//编辑内容 
			setItemContent(e){
				this.editNameStr = e;
			},
			editContent(item){  
				this.editNameShow1=true;
				this.curItem = item;
				// this.editNameContent = item.name; 
			},
			changeContent(e){
				this.editNameContent = e; 
			},
			confirmEditContent(){ 
				if ( this.editNameContent == '' ) return false;
				modifyName({'id':this.curItem?.id,'name':this.editNameContent}).then(res =>{
					uni.$u.toast(res.msg);
					this.editNameShow=false
				}).catch(e =>{
					uni.$u.toast(e.msg);
				})
			},
			
			 
			resetSlider(){
				this.slider = this.slider ==  50.1 ? 50 : 50.1;
				this.swiperRunning = false;
				this.startSwiper = false;
				this.isSliderBtn = false;
				
			},
			runSwiper(value){
				this.startSwiper = true;
				if ( this.swiperPosition == 'right' && this.slider > 51){
					if ( this.isRightAllData ){
						uni.$u.toast("所有配方加载完毕");
						return false;
					}
					if ( !this.swiperRunning && !this.isRightAllData ){
						this.swiperRunning = true;
						if ( this.current >= 9 ){
							this.current =0
							
						}else{
							this.current ++;
						}
						console.log('cur',this.current);
						
					}
				}
				if ( this.swiperPosition == 'left' && this.slider < 50 ){
					if ( this.isLeftAllData ){
						uni.$u.toast("所有配方加载完毕");
						return false;
					}
					this.startSwiper = false;
					console.log(this.startSwiper);
					if ( !this.swiperRunning ){
						this.swiperRunning = true;
						console.log(this.current);
						if ( this.current == 0 ){
							this.current =9
						}else{
							this.current --;
						}
						console.log(this.current);
						
					}
				}
				
			},
			runSwiper1(value){
				this.isSwiper = true;
				this.isRunning = true;
				let position = '';
				let speed = 50;
		
				if ( value < 50 ){
					position = 'left';
				}
				if ( value > 50 ){
					position = 'right';
					
				}
				
				if ( this.interval ) clearInterval(this.interval)
				if ( position == 'right' ){
					speed = 50;
					this.swiper.index++;
					this.current ++;
					let v =  value - speed;
					speed =  v +  v * (v/4) ;
				
				}
				if ( position == 'left' ){
					speed = 50;
					if ( this.current > 0 ){
						this.swiper.index--;
						this.current --;
						if ( this.current < 0 ){
							this.current = 9
						}
					}
					let v =  (100 - (speed +  value))
					speed = v + v * (v/4) ;
				
				}
				this.interval = setInterval(() =>{
					if ( position == 'right' ){
						this.swiper.index++;
						this.current ++;
						if ( this.current >= this.limit ){
							this.current = 0;
							this.swiper.index = 0;
							this.page ++;
							console.log('dcccc');
							this.getData();
						}
					}
					if ( position == 'left' ){
						
						if ( this.current == 0 && this.page > 1 ){
							this.current = 9;
							this.swiper.index = 9;
							
							if ( this.page <= 1 ){
								//clearInterval(this.interval);
							}
							this.page --;
							this.getData();
						}else{

							if ( this.page <= 1 && this.current == 0 ){
								//clearInterval(this.interval);
								this.swiper.index = 9;
								this.current = 9;
							}else{
								
								this.swiper.index--;
								this.current --;
							}
						
						}
						
					}
					console.log('dd',this.page);
				},800-speed) ;
				if ( value == 50 ){
					//clearInterval(this.interval);
				}
				console.log('index',this.current);
				
			},
			setCurSwiper(e){
				
				this.current = e.detail.current;
				this.handleSwiperChange(e);
				
				this.swiper.index = e.detail.current;
				this.form.name = this.data[this.swiper.index].name;
				this.form.truename = this.data[this.swiper.index].truename;
				this.form.id =  this.data[this.swiper.index].id;
				this.form.code =  this.data[this.swiper.index].code;
				
				if ( !this.isSliderBtn ){
					this.current = e.detail.current;
				}
				
				if ( this.current < e.detail.current ){
					console.log('dd',this.current);
					if ( this.swiper.index >= 9 ){
						this.current = 0;
						this.page ++;
						this.getData();
					}
				}
			},
			//swiper滑动事件
			swiperChange: function(e) {
				this.swiper.index = e.detail.current;
				if ( (this.swiperPosition == 'left' && this.slider < 50)  ){
					if ( this.page <=1 && this.current == 0 ){
						uni.$u.toast("所有配方加载完毕");
						this.current = 0;
						this.isLeftAllData = true;
						return false;
					}
					this.current --;
					console.log('dddd',this.current);
					if ( this.current < 0 ){
						this.current = 9;
						this.page --;
						this.getData();
					}
					
				}
				
				if ( this.swiperPosition == 'right' && this.slider >= 51){
					this.current ++;
					console.log('dddd',this.current);
					if ( this.current >= 9 ){
						this.current = 0;
						this.page ++;
						this.getData();
					}
				}
				
			},
			clickTab(e){
				
			},
			setShowMyself(value){
				
				this.showMyself = value;
				this.getMyHash();
			},
			init(){
				if ( this.action == 'confirm' && !this.id ){
					return false;
				}
				this.getData();
				
			},
			getHashName(){
				if ( this.isGettingName ) return false;
				this.isGettingName = true;
				//this.statusText = "AI正在为您优化配方...";
				this.current_gpt_server = 0;
				//this.placeholder.name = '正在获取香氛名称...';
				this.placeholder.name = '正在获取名称'
				  getStaffName(this.id,this.current_gpt_server,this.isReload,(this.staff_name_gpt_retry_time)).then(res =>{
				  
					this.step ++;
					this.nameLoaded = true;
					this.form.name = res.data;
					this.data[0].name = res.data;
					this.isGettingName = false;
					uni.hideLoading();
					this.placeholder.name = '';
				  }).catch(e =>{
					  uni.hideLoading();
					this.staff_name_gpt_retry_time++;
					this.isGettingName = false;
					console.log(this.staff_name_gpt_retry_time);
					if( this.staff_name_gpt_retry_time < 3 ){
						this.getHashName();
					}else{
						this.nameLoaded = true;
						uni.hideLoading();
						this.placeholder.name = '请填写香氛名称';
					}
				  })
			},
			reloadGPT(id,type){
				 uni.showLoading({
					title:'重新获取中'
				 })
				  this.isReload = 1;
				
				  if ( type == 'name' ){
					 
					  this.getHashName();
				  }
				  if ( type == 'desc' ){
					  
					   this.getHashDesc();
				  }
			},
			getHashDesc(){
				if ( this.isGettingIntro ) return false;
				this.isGettingIntro= true;
				let that = this;
				setTimeout(() =>{
					this.statusText = "AI正在为您优化配方...";
				},2000);
				
				this.data.intro = '';
				var xhr = new XMLHttpRequest()
				// 设置 XMLHttpRequest 对象
				
				xhr.open('POST', cfg.HTTP_REQUEST_URL+'/api/hashs/getDesc',true)
				xhr.responseType = 'text'
				xhr.timeout = 0;
				xhr.setRequestHeader("Content-Type", "application/json");
				xhr.setRequestHeader("authori-zation", store.state.app.token);
				xhr.onreadystatechange = function () {
				    if (xhr.readyState === XMLHttpRequest.LOADING) {
						
				        // 处理 HTTP 数据块
				        let ret = xhr.responseText
									
						 if ( ret == '' ){
							 that.current_intro_gpt_server ++;
							 if ( that.current_intro_gpt_server >= that.total_gpt_server ){
							 	that.current_intro_gpt_server = 0;
								
							 }
							 that.staff_intro_gpt_retry_time++;
							 this.isGettingIntro = false;
							 if ( that.staff_intro_gpt_retry_time <=3  ){
								that.getHashDesc();
							}else{
								that.descLoaded=true;
							}
						 }else{
							 that.descLoaded=true;
							 that.form.intro = ret;
							 that.data[0].intro = ret;
							 that.initScrollHeight();
							 
						 }
						uni.hideLoading();
					
				    }
				
					if (xhr.readyState === 4){	
						if ( xhr.status == 200 && xhr.responseText != '' ){
							that.descLoaded=true;
							that.step ++;
							that.isGettingIntro = false;
							 that.initScrollHeight();
						}else{
							that.current_intro_gpt_server ++;
							if ( that.current_intro_gpt_server >= that.total_gpt_server ){
								that.current_intro_gpt_server = 0;
							}
							that.staff_intro_gpt_retry_time++;
							if ( that.staff_intro_gpt_retry_time < 3  ){
								that.getHashDesc();
							}else{
								that.descLoaded=true;
							}
						}
					}
				}
				xhr.send(JSON.stringify({'id':that.id,'server':that.current_intro_gpt_server,reload:that.isReload,'thread':1,times:that.staff_intro_gpt_retry_time}));
			},
		
			getGptStaff(){
				this.statusText = "AI正在获取配方...";
				if ( this.hash.finish == 1 ){
					this.staffLoaded = true;
					this.nameLoaded = true;
					this.descLoaded = true;
					return false;
				};
				actionLog({"url" : 'pages/tiaopei4/tiaopei4','mark' : '[调配HASH的ID:'+this.id+']'}).then(res =>{
					
				}).catch( e =>{
					
				});
				if( this.hash.type == 0 ){
					this.staffLoaded = true;
					if( this.hash.name == '' ){
						this.getHashName();
					}else{
						this.nameLoaded = true;
					}
					if( this.hash.intro == '' ){
						this.getHashDesc();
					}else{
						this.descLoaded = true;
					}
				}else{
					
					this.error = 0;
					if ( this.staff_total_error >= 3 ){
						//this.goto("tiaopei/tiaopei?id="+this.id);
						return false;
					}
					if ( this.current_gpt_server >= this.total_gpt_server ){
						this.current_gpt_server = 0;
					}
					getStaff(this.id,this.current_gpt_server,1,this.staff_total_error).then(res =>{
						if ( res.data.type == 3 ){
							uni.navigateTo({
								url:'/pages/tiaopei4/tiaopei4?action=official&master_id='+res.data.master_id + '&id='+res.data.id
							})
							return false;
						}
						this.staffLoaded = true;
						this.getHashName();
						this.getHashDesc();
						
						
					}).catch(e =>{
						if ( e.code != 1 ){
							this.error ++;
						}
						if ( this.error == 2 ){
							this.current_gpt_server ++;
							this.staff_total_error++;
							this.getGptStaff();
						}
					});
					
				}
				
				
			},
			doRepick(){
				repick({id:this.id,'master_id':this.master_id}).then(res =>{
					this.master_id = res.data.id
					this.data = [];
					this.data.push(res.data.list);
					this.form.name = this.data[0].name;
					this.form.intro = this.data[0].intro;
					this.form.truename = this.data[0].truename;
					this.form.code = this.data[0].code;
					this.form.id = this.data[0].id;
					return false;
				}).catch(e =>{
					console.log(e);
				})
			},
			doReset(){
				
				
				this.staffLoaded = false;
				this.descLoaded = false;
				this.nameLoaded = false;
				reset({"id":this.id}).then(ret =>{
					//this.init();
					this.getGptStaff();
				}).catch(e =>{
					uni.$u.toast(e);
				})
			},
			doConfirm(){
				confirm({id:this.id,isLock:this.isLock ? 1 : 0,truename:this.form.truename,name:this.editNameStr,intro:this.form.intro,isOfficial:this.isOfficial? 1 : 0}).then(res =>{
					  /*
					  uni.showToast({
						icon:'none',
						'title': res.msg
					  })*/
					  this.success = true;
					  this.isConfirm = 1;
					  this.hash.status = 1;
					  //goto('tiaopei7/tiaopei7?id='+id.value);
				}).catch(e =>{
						  
					  uni.showToast({
						icon:'none',
						'title': e.msg
					  })
				})
			},
			doCopy(){
				copyStaff({id:this.form.id,isLock:this.isLock ? 1 : 0,isOfficial:this.isOfficial? 1 : 0}).then(res =>{
						this.form.code = res.data.hash;
						this.success = true;
				  }).catch(e =>{
					  uni.showToast({
						icon:'none',
						'title': e.msg
					  })
				  })
			},
			copyText(text){
				console.log('ddd');
				uni.setClipboardData({
				        data: text,
				        success() {
				          uni.showToast({
				            title: '复制成功',
				            icon: 'success'
				          });
				        }
				      });
			},
			submit(){
				if ( this.isSubmit == 0 && this.isLock == 1 ){
					  uni.showModal({
						content:'锁定订单后，您的香氛将安排生产，但无法15分钟内重新调整配方，是否继续？',
						confirmText:'确定，帮我锁定 ',
						cancelText:'取消，还不确定',
						success: res =>{
							this.isSubmit = 1;
							if ( res.confirm ){
								this.isLock = 1;
								if ( this.action == 'confirm' ){
									this.doConfirm();
								}
								if ( this.action == 'official' ){
										this.doCopy();
								}
								if ( this.action == 'my' ){
										this.doCopy();
								}
								return false;
							}else{
								this.isLock = 0;
								return false;
							}
										
						}
					  })
					 
				}else{		  			
					 if ( this.action == 'confirm' ){
					 	this.doConfirm();
					 }
					 if ( this.action == 'official' ){
					 	this.doCopy();
					 }
					 if ( this.action == 'my' ){
					 		this.doCopy();
					 }
				}
			},
			
			setAgreement(n){
				this.isLock = n;
			},
			
			// 删除的方法 ，具体逻辑需处理
			delBlock(){
				uni.showModal({
					content:'确认是否删除？',
					success: (res) => {
						if ( res.confirm ){ 
						}
					}
				})
			},
			// 保存配方
			saveWay(){
				this.successWay = true 
			},
			savePic(){
				this.generateImage();
			},
			generateImage() { 
				 const element = document.getElementById('shareBox'); // 替换为你的页面元素ID
				 html2canvas(element).then(canvas => {
				   const imgData = canvas.toDataURL('image/png'); // 将Canvas转换为图片数据
				   console.log(imgData,'imgData'); 
				   this.saveImageToLocal(imgData); // 调用保存图片到本地的函数
				 });
			},
			saveImageToLocal(imgData) {
				 const link = document.createElement('a');
				 link.href = imgData;
				 link.download = 'shareImg.png'; // 设置下载图片的名称
				 document.body.appendChild(link);
				 link.click();
				 document.body.removeChild(link);
				 uni.showLoading({
				 	 title:'保存成功！'
				 })
				 
				 uni.hideLoading();
			},
		}
	}
		
</script>

<style lang="scss" scoped>
	page{
		background-color: #151515; 
	}
	:deep(.u-popup__content){
		border-radius:12rpx;
	}
	.savePop .content{
		width: 640rpx;
		// background: url(@/assets/dialoBg.png) top center no-repeat;
		background-size: 100% 20rpx; 
		border-radius:12rpx;
		.content1{
			padding: 80rpx 60rpx 60rpx 60rpx; 
			line-height: 40rpx;
		}
		.bottomPop{
			line-height: 96rpx;
			display: flex;
			border-top:1rpx solid rgb(214, 215, 217);
			.btn{
				width: 33.3%;
				text-align: center;
				line-height: 96rpx;
				color: #666;
			}
			.btn:first-child{
				border-right:1rpx solid rgb(214, 215, 217);
			}
			.btn3{
				background-color: #1f1f1f;
				color:#fff;
			}
		}
	}
	.header{
		color: #FFF;
		display: flex;
		width: 100%;
		padding: 30rpx 120rpx 0 120rpx ;
		align-items: baseline;
		justify-content: space-between;
		.title{
			font-size: 30rpx;
		}
		.checkbox{
			
		}
	}
	.search{
		margin-top: 0;
		.u-border{border:1px solid #666666}
		position: relative;
		padding: 20rpx 120rpx 20rpx 120rpx;
		.icon{
			position: absolute;
			top: 30rpx;
			right: 120rpx;
		}
		.input{
			color: #FFF;
			border-bottom:1px solid #666666;
			padding: 10rpx;
			// border-radius: 10rpx;
		}
		.input-placeholder{
			color: #666666;
		}
		.result{
			width: 100%;
			
			position: absolute;
			
			z-index: 1000;
			left: 0;
			padding: 20rpx;
			.container{
					box-sizing: border-box;
					height: 400rpx;
					background-color: #000;
					padding: 10rpx;
					.item{
						padding: 20rpx;
						display: flex;
						justify-content: space-between;
						border-bottom: 1px solid #666666;
						.name{
							color: #FFF;
						}
						.code{
							color: #c49c4c;
						}
					}
			}
			
		}
	}
	.stop{
		color: #FFFFFF;
		text-align: center;
	}
	.slider{
		margin-top: 20rpx;
		padding: 0 ;
		.btn{
			margin-top: 40rpx;
		}
	}
	.top-swiper{
		margin:35rpx 0  30rpx 0; 
		width: 100%;
		height: 100%;
		// overflow-x: hidden;
		-webkit-text-size-adjust: none;
		-webkit-user-select: none;
		-moz-user-select: none;
		-ms-user-select: none;
		user-select: none;
		padding-bottom:70px;
		
		.bg{
			padding-top: var(--status-bar-height);
			box-sizing: content-box;
			width: 100%;
			position: relative;
			
			.placeholder{
				box-sizing: content-box;
				padding-top: 600rpx;
				height: 44px;
			}
			
			.image{
				box-sizing: content-box;
				position: absolute;
				z-index: 1;
				top: 0;
				left: 0;
				width: 100%;
				height: 100%;
				overflow: hidden;
				
				&::after{
					content: '';
					position: absolute;
					width: 100%;
					height: 100%;
					z-index: 1;
					bottom: 0;
					left: 0;
					height: 65%;
				
				}
				
				> image{
					position: absolute;
					box-sizing: content-box;
					padding: 60px;
					top: 0;
					left: 0;
					width: 100%;
					height: 80%;
					top: -60px;
					left: -60px;
					filter: blur(50px);
				}
			}
		}
		
		.box{
			padding-top: var(--status-bar-height);
			box-sizing: content-box;
			width: 100%;
			height: auto;
			position: relative;
			// padding-bottom:100rpx;
		}
		
		.swiper {
			height: 820rpx;
			margin: 0rpx;
			padding-bottom: 160rpx;
			.le-img {
				// overflow: hidden;
				// background: url(@/assets/dialogBg.png);
				background-size: 100% 100%;
				border-radius: 0!important;
				background-color:transparent!important;
				.current{
					position: absolute;
					right: 20rpx;
					top: 20rpx;
				}
				.new{
					position: absolute;
					background-color: rgb(170, 0, 0);
					left: -28rpx;
					top:20rpx;
					width:150rpx;
					height: 50rpx;
					line-height: 50rpx;
					text-align: center;
					font-size: 30rpx;
					font-weight: bold;
					color: #FFF;
					// padding:60rpx 20rpx 20rpx 20rpx;
					 transform: rotate(-35deg); 
				}
				.saveHasMaske{
					position: absolute;
					background-color: rgb(170, 0, 0);
					left: -30rpx;
					top:15rpx;
					width:240rpx;
					height: 50rpx;
					line-height: 50rpx;
					text-align: center;
					font-size: 30rpx; 
					color: #FFF;
					// padding:60rpx 20rpx 20rpx 20rpx;
					 transform: rotate(-20deg); 
				}
				.saveNoMaske{
					width:280rpx;
					font-size: 26rpx; 
					background-color: #888;
				}
				.name{
					font-size: 40rpx; font-weight: bold;
					text-align: center;
					 padding: 135rpx 0 10rpx 0;
					 display: flex;
					}
				.name1{
					font-size: 40rpx; font-weight: bold;
					text-align: center;
					
					 padding: 135rpx 0 10rpx 0;
					  display: flex;
					}
				.name2{
					font-size: 40rpx; font-weight: bold;
					text-align: center;
					
					 padding: 135rpx 0 10rpx 0;
	
					}
				.code{
					font-size: 18rpx;
					background-color: #000;
					border-radius: 50rpx;
					color: #FFF;
					padding: 10rpx 10rpx;
					text-align: center;
					margin: 0 auto;
					margin:0 36rpx;
					
				}
				#scroll_intro{
					line-height: 36rpx;
					display: flex; 
					align-items: first baseline;
					
				}
				.scroll-intro{
					font-size: 18rpx;
					line-height: 36rpx;
					height: 280rpx; 
					margin-top: 20rpx;
					display: flex;
					
				}
				.intro{
					font-size: 21rpx;
					overflow-y: auto; 
					line-height: 36rpx;
					height: 280rpx; 
					margin-top: 0rpx;
					padding-bottom: 40rpx;
					box-sizing: border-box;
					padding: 0rpx 18rpx;
				}
				.reload-intro{
					margin-top: 20rpx;
					left:60rpx;
					position: absolute;
				}
				.nickname{
					display: flex;
					justify-content: space-between;
					font-size: 26rpx;
					
					
					.left{
						flex: 1;
					}
					.right{
						display: flex;
						align-items: center;
						justify-content:flex-end;
						.username{
							padding:30rpx 0;
							font-size: 22rpx;
						}
					}
				}
				.bottom{
					justify-content: space-between;
					display: flex;
					align-items: center;
					.left{
						flex: 1;
						.line{
							height: 2px;
							background-color: #000;
						}
					}
					.right{
						margin-left: 20rpx;
						display: flex;
						font-size: 22rpx;
						align-items: center;
					}
				}
				width: 100%;
				height: 100%;
				display: block;
				transform: scale(0.9);
				background-color: #FFF;
				transition: transform 0.3s ease-in-out 0s;
				border-radius: 30rpx;
				padding: 0rpx 60rpx;
				&.le-active {
					transform: scale(1);
				}
			}
		
		}
	}
	.pg_bottom{
		color: #FFF;
		font-size: 22rpx;
		padding: 0 30 rpx;
		margin: 20rpx auto 30rpx auto;
		position: relative;
		.search_back{
			position: absolute;
			width: 100%;
			
			text-align: center;
			top: -180rpx;
			z-index: 100;
			.btns{margin: 0 auto;
			border-radius: 10rpx;
				background-color: #37383c;
				width: 200rpx;
				padding: 20rpx;
				margin: 0 auto;
			}
		}
		.checkbox{
			width: 550rpx;
			display: flex;
			align-items: center;
			margin: 0 auto;
			// opacity: 0.8;
			color: #999;
			// justify-content:center
			padding-left:60rpx
		}
		.btn{
			margin: 30rpx 30rpx 50rpx 30rpx;
			background-color: #37383c;
			padding: 20rpx;
			border-radius: 10rpx;
			display: flex;
			flex-direction: row;
			flex-wrap: wrap;
			text-align: center;
			align-items: center;
			
			.tips{
				width: 100%;
				font-size: 20rpx;
				margin-top: 20rpx;
				color: #ddd;
			}
			.sure{
				width: 100%;
				font-size: 30rpx;
				font-weight: bold;
			}
		}
		.btn1{
			margin: 30rpx 10rpx;
			padding: 30rpx 0;
		}
	}
	.overlay-warp{
		width: 80%;
		margin: 500rpx auto;
		.tip{
			color: #FFF;
			text-align: center;
			margin-bottom: 20rpx;
			font-size: 25rpx;
			line-height: 35rpx;
		}
		.status{
			color: #FFF;
			text-align: center;
			margin-bottom: 20rpx;
			font-size: 40rpx;
		}
	}
	.progress-warp{
	
				display: flex;
				align-items: center;
				justify-content: center;
				flex-wrap: wrap;
				flex-direction: row;
				height: 100%;
				.status{width: 100%;}
	}
	.success{ 
		background-color: #000;
		padding: 30rpx;
		border-radius: 20rpx;
		.title{
			color: #fff;
			font-size: 32rpx;
			line-height: 1.5;
			margin-top: 40rpx;
		
		}
		.code{
				color: #c49c4c;
				font-size: 40rpx;
				text-align: center;
				margin: 20rpx 0;
		}
		.haxi2{
			font-size: 26rpx;
			color: #fff;
			margin-bottom: 40rpx;
			line-height: 1.8;
			text{
				color: #c49c4c;
			}
			
		}
		.text_white{
			color: #fff;
			font-size: 40rpx;
			text-align: center;
		}
		.haxi1{
			color: #fff;
			
			margin-bottom: 50rpx;
			.t1{
				font-size: 60rpx;
				margin-bottom: 20rpx;
			}
			.status{
				margin-top: 50rpx;
				font-size: 30rpx;
				color: #c49c4c;
				
			}
		}
		.haxi3{
			background-color: #37383c;
			display: flex;
			align-items: center;
			justify-content: center;
			color: #fff;
			font-size: 28rpx;
			border-radius: 10rpx;
			margin: 0 auto;
			padding: 30rpx;
		}
	}
	.reload{
		display: flex;
		color: #FFF;
		justify-content: center;
		align-items: center;
		font-size: 30rpx;
		text-align: center;
		margin: 0 auto;
		width: 200rpx;
		padding: 0 0 20rpx 0rpx;
	}
	.btBottom{
		position: fixed;
		left: 0;
		bottom: -10px;
		z-index: 99;
		background-color: rgb(63, 64, 68);
	}
	.flex{
		display: flex;
	}
	.dotTop{
		width: 8px;
		height: 8px;
		background-color: #000;
		transform: rotate(45deg);
		margin: 60rpx auto 0  auto;
	}
	
	
	 .indicator { 
		 position: absolute;
		 bottom: -400px; /* 根据需要调整位置 */
		 left: 50%;
		 transform: translateX(-50%);
		 display: flex;
		 align-items: center;
		 z-index: -1;
		 
		 padding: 30px 0;
	        @include flex(row);
	        justify-content: center;
	
	        &__dot {
	             height: 6px;
	             width: 6px;
	             border-radius: 100px;
	             background-color: rgba(255, 255, 255, 0.35);
	             margin: 2px 5px;
	             transition: background-color 0.3s;
	    
	            &--active {
					height: 10px;
					width: 10px;
					margin: 0px 5px;
	                background-color: #ffffff;
	             }
	        }
	    } 
		
	 .indicator-num {
			padding: 2px 0;
			background-color: rgba(0, 0, 0, 0.35);
			border-radius: 100px;
			width: 35px;
			@include flex;
			justify-content: center;
	
			&__text {
				 color: #FFFFFF;
				 font-size: 12px;
			 }
		}
		
		.uni-swiper-wrapper{
			overflow: auto;
		}
	:deep(.uni-swiper-wrapper){
		overflow: visible!important; 
	}	
	.itemSwpier{
		overflow: visible!important; 
		opacity:0.4;
	}
	.itemSwpierCur{
		opacity:1;
	} 
	.swiper-item-content {
	  display: flex;
	  align-items: center;
	  justify-content: center;
	  height: 100%;
	}
	.indicator-swiper {
	  height: 150rpx;
	  position: absolute;
	  bottom: -50rpx;
	  left: 0rpx;
	  width: 100%;
	  width: calc(100%);
	  // margin: 0 50rpx;
	  box-sizing: border-box;
	  overflow: hidden;
	}
	.indicator-group {
	  display: flex;
	  align-items: center;
	  justify-content:space-around;
	}
	.indicator-dot {
	  width: 28rpx;
	  height: 28rpx;
	  border-radius: 50%;
	  background-color: #fff;
	  margin: 0 1rpx;
	  transition: transform 0.3s, background-color 0.3s;
	}
	.indicator-dot.active {
	  // background-color: green; 
	  transform: scale(0.2);
	  opacity: 0.2;
	}
	.indicator-dot.active1 { 
	  transform: scale(0.3);
	  opacity: 0.3;
	}
	
	.indicator-dot.active2 { 
	  transform: scale(0.4);
	  opacity: 0.4;
	}
	
	.indicator-dot.active3 { 
	  transform: scale(0.45);
	  opacity: 0.45;
	}
	.indicator-dot.active4 {
	  transform: scale(0.5);
	  opacity: 0.5;
	}
	.indicator-dot.active5 {
	  transform: scale(0.55);
	  opacity: 0.55;
	}
	.indicator-dot.active6 {
	  transform: scale(0.6);
	  opacity: 0.6;
	}
	.indicator-dot.active7 {
	  transform: scale(0.65);
	  opacity: 0.65;
	}
	.indicator-dot.active8 {
	  transform: scale(0.7);
	   opacity: 0.7;
	   
	}
	.indicator-dot.active9 {
	  transform: scale(0.8);
	   opacity: 0.8;
	} 
	.indicator-dot.active10 {
	  transform: scale(0.9);
	  opacity: 0.9;
	}
	.indicator-dot.active11 { 
		transform: scale(1); 
		background-color: #fff;
	 }
   .indicator-dot1{
	   transform: scale(0.1); 
   }
	
	.scroll-view {
	  white-space: nowrap;
	  width: 100%;
	}
	
	.dialogBox{ 
		min-height: 300rpx;
		margin:0 40rpx;  
		position: relative;
		.saveHasMaske{
			position: absolute;
			background-color: rgb(170, 0, 0);
			left: -30rpx;
			top:15rpx;
			width:440rpx;
			height: 50rpx;
			line-height: 50rpx;
			text-align: center;
			font-size: 30rpx; 
			color: #FFF; 
			transform: rotate(-20deg); 
		}
		.headerTop{
			position: absolute;
			top:20px;
			left: 0%;
			width: 95%;
			z-index: 9999; 
			.saveHasMaske{
				left: -40rpx;
				top:5rpx;
			}
		}
		
		.logoh{
			width: 213rpx;
			height: 168rpx;
			margin: 0 auto;
			display: block;
			padding-bottom: 30rpx;
		}
		.dialogBoxCon{
			// background: url(../../assets/dialogBg.png);
			background-size: 100% 100%;
			padding: 50rpx 50rpx 50rpx 50rpx; 
			.til_code{
				width: 100%;
				height: 80rpx;
				background-color: #000;
				color:#fff;
				line-height: 80rpx;
				font-size: 46rpx;
				text-align: center;
				
			}
			.info1,.info2{
				padding: 30rpx 0;
				border-bottom: 1px solid #000;
				margin-bottom: 30rpx;
				line-height: 50rpx;
				font-size: 30rpx;
				// font-weight: bold;
				color: #000;
				position: relative;
			}
			.codeImg{
				position: absolute;
				right:20rpx;
				top:100rpx;				
				image{
					width: 120rpx;
					height: 120rpx;
				}
			}
			.info2{
				font-size: 24rpx;
				line-height: 46rpx;
				padding: 0rpx 0 20rpx 0;
				border-bottom: none;
			}
			.info2 h2{
				text-align: center;
			}
			.haxi3{
				// background: url(../../assets/dialog_bt.png) no-repeat;
				background-size: 100% 86rpx;
				color: #fff;
				font-size: 36rpx;
				line-height: 86rpx;
				text-align: center;
				font-weight: bold;
			} 
		}
		.close{
			text-align: right;
			.btnClose{
				width: 47rpx;
				height: 47rpx;
				margin-right: -20rpx;
			}
		}

	}
	
	.rgClose{
		position: absolute;
		right: 30rpx;
		top:30rpx;
	}
	
	.codeBox{
		position: relative;
		.reload{
			position: absolute;
			right: -100rpx;
			top:0rpx;
		}
	}
	.resetBtn{
		display: flex;
		align-items: center;
		justify-content: center;
		color: #fff;
		font-size:26rpx;
		padding-top:40rpx;
	}
	.dotSwiper{
		width: 4.75%!important; 
		height: 50rpx!important; 
	}
 
</style>
